Wiki Help
Hawken Wiki Editing Help Overview The Hawken wiki uses some more "advanced" web functions and code in order to achieve a more articulated design. Raw HTML, CSS, and jQuery code can be found on many pages. We often use these features in place of common wiki code structures. Wiki code is simple and easy to use, which makes it great, yet terrible at the same time. If our entire wiki was just wiki code, we would not have even simple details like image hover effects and dynamic page elements. This article serves as a help page and reference sheet for those who want to learn how to edit these advanced parts of our wiki. A quick note: you'll see terms like "parent" and "children" thrown around in this guide. "Parent" means anything that contains the mentioned object. "Children" means anything that is inside the mentioned object. Quick Navigation Hide Quick Navigation Show Quick Navigation HTML 5 HTML 5 stands for Hyper Text Markup Language 5. It is the most recent version of the web markup code that web browsers use to gather and display website code. HTML uses elements to differentiate segments of code from one another. An HTML element is composed of a start tag, an end tag, and the content between the two. Each element is unique in the function that it is used for. All tags are enclosed in arrow brackets, with the element's content within its start and end tag. For example, a start tag would look like , and an end tag would look like . All put together, an HTML element would look something like this: Content 'The Paragraph Element' – The most common HTML tag on the wiki is , which defines the start of a paragraph of text. Text is placed within the start and end tags, like this: This is some text . Everytime you start a new paragraph of text, you would use a new set of tags. Example: Paragraph one Paragraph two. Paragraph elements have natural margins above and below them, allowing for instant, clean formatting of elements (if desired). 'The Line Break Element' – Line break tags, , are also very common. They define an empty line, much like pressing enter in a word-processing program. They are unique in the fact that they are a single tag, and do not have a separate start or end tag. Line breaks are used to put space between paragraphs, to separate other HTML elements, and to bring elements down one line that would not do so normally. Line breaks are very useful for working around the Wikia Rich Text Editor's insistence on double-spacing paragraphs when Enter is pressed. The tag can be used for single line returns, like so: Text More text. Wikia converts to , the XHTML line break element. and are the same thing. 'The Division Element' – Division tags are used to define a section of code different from the rest of the HTML. Division elements look like this: Content. Divs (as they are called) are often used with CSS for page formatting. For example, on the mech pages, a div is used to section off the popup window for the Tips & Tactics box from the rest of the page. This allows us to individually show/hide the popup separately from the main page content. You can also use divs to organize HTML code, which makes it easier to read. Just like with most HTML tags, other elements can be placed within a div, including other divs. A div is a block element, meaning that it posses its own layout attributes and will try to exist within its own horizontal line, instead of following any preceding element. Text can be placed within in a div without the use of a paragraph element. More info on styling with divs in the CSS section. 'The Span Element' – Spans (pronounced literally like divs) are the inline equivalent of the element. This means that they inherit their layout attributes (such as color and formatting) from their parent element and everything inside of them runs together in one horizontal line. For example, in this code: This is some text and this is some more text, the span will inherit any attributes the paragraph element has, such as font size, color, etc. Spans are usually placed within other elements to make certain parts of the parent element stand out. Text can be placed within in a span without the use of a paragraph element. More info on styling with spans in the CSS section. 'Comments' – Comments are parts of a webpage's code that are not interpreted by a browser. They allow for one to explain parts of their code and mark certain parts to aid in readability. A typical comment would look like this: 'The Table Element Family' – , , and HTML tables consists of multiple tags in order to be formatted properly. The (links), (images), and are common in general HTML usage. Wikia prohibits the use of tags like these, instead replacing them with wikicode. Links in wikicode are done with LINK TEXT and images are IMAGE NAME. Iframes are not allowed at all. A special attribute called id can sometimes be found within HTML element start tags. This id attribute gives the affected element an identifier name that allows other page functions to find it. This is used commonly in scripting and CSS functions. A typical id attribute usage may look like this: ... CSS 3 CSS 3 stands for Cascading Style Sheets 3. CSS is used to format HTML elements, as built-in HTML element formatting is deprecated in HTML 5. Different segments of CSS code are called styles. Styles can include layout formatting, coloring, and even dynamic functions. Usually, CSS styles are stored in separate stylesheet files, but Wikia doesn't follow that practice. Instead, one large stylesheet contains all the styles for the entire wiki. Only admins can edit this stylesheet, however, which presents a problem to regular editors. This is where inline CSS comes in. In the start tag of an HTML element, a coder can add the style="" attribute to apply formatting to said element without the need for a stylesheet. For example, in this code: Text, the text within the paragraph is formatted to have a font size of 20px. All inline CSS goes within the style="" attribute. For example, this code: Text creates this: Text. Whenever a certain CSS property is modified with inline CSS, the structure is as follows: the property name (e.g. color), a colon (:), then the value to set the property to (e.g. #FFFFFF). Use a a semicolon (;) between styles when modifying multiple properties. A completed example may look like this: style="color:#FFFFFF; font-size:20px". If a CSS style class has been defined in the master wiki stylesheet, the style can applied with the class="" attribute. For example, say we have a style by the name of MyStyle, and we want to apply it to a paragraph element. Our code would look like this: Text. 'The Text Align Style' – text-align Text alignment is very important in webpage formatting. It is used to align elements to the left, right, or center of its container. The text-align CSS property can be used to align any type of element, not just text elements like . Typical use of text-align may look like this: Text being aligned . This text is being aligned left with CSS (text-align:left) This text is being centered with CSS (text-align:center) This text is being aligned right with CSS (text-align:right) 'The Color Style' – color In web design, colors are represented by name and hexadecimal number (hex value). For example, "black" is literally the word black, and its hex value is #000000. Hex values are 6 digit codes for colors that use the hexadecimal base numerical system. A single hex letter can range from 0 to F, with the letters A to F converting to the decimals number 10 to 15. In web colors, hex numbers are put in pairs of two, with three pairs total for the individual red, green, and blue (RGB) channels in a color (in that order). In the color "white", the R, G, and B values are all at full value, which is 255, or FF in hex. After putting all three pairs of FF together, the hex color value for white is #FFFFFF. All hex color values are preceded by a "#" as an identifier. When applying color styling to an element, the attribute may look something like this: Content. W3Schools has created a very useful color picker that provides a color's hex value for use in HTML/CSS. Examples: Red text is #FF0000 Green text is #00FF00 Blue text is #0000FF 'The Background Color Style' – background-color Whereas color is used to set the color of elements inside a parent element, background-color is used to create a backdrop for the parent element itself. This can be used to highlight text, like this: Highlighted text. Result: Highlighted text. 'The Height & Width Styles' – height and width In HTML 4 and earlier, height and width attributes could be directly applied to an element as attributes. HTML 5 does not permit this, so sizing must be done with CSS. Height and width styles work exactly as one would infer: they set the vertical and horizontal size of an element. In the following example, CSS is used to style a 50px square: . Result: Aside from pixel amounts, you can also use percentages to set height and width. When a percentage is used, the percentage is out of the parent element's dimensions. In the following example, the rectangle shown is 50% of the page's width and 10px tall: . Result: 'The Vertical Align Style' – vertical-align Vertical alignment is just as important as horizontal alignment done with text-align. For example, the following code: Top Middle Bottom creates a table with three cells that each have their own vertical alignment. Result: Top Middle Bottom Vertical alignment will only function properly when used on child elements that are inside a parent element with a definite height. The age-old convention for website layout & rendering is to format elements in sequential horizontal lines, meaning that attempting to vertical-align a block element like a that is not within another may not have any effect. 'The Display Style' - display The display property is used to change how an element interacts with other elements around it in a webpage's layout. There are four common types (and other more uncommon types) of display: inline - makes the element and its children behave like a span; everything runs together in the same horizontal line and should inherit attributes from its parent block - makes the element and its children behave like a div; it gets its own horizontal line, set apart from other elements, and should not inherit attributes from its parent inline-block - makes the element behave like a span, but its children will behave like a div none - removes the element from the page layout, effectively collapsing the space it would have otherwise occupied Set elements to inline when you want them to follow the flow and design of their parent. Set elements to block when you want them to be individual pieces of the website that are not connected to other things (this is great for paragraphs, sections, and popups). 'The Margin Style Family' – margin, margin-top, margin-bottom, margin-left, and margin-right Margins are spacing placed at the very outermost edges of the element they are applied to. Pixels are the most common unit of measure for margins. There are five common types of margins: 1) margin - sets a margin on all sides of an element 2) margin-top - sets a margin on the top of an element 3) margin-bottom - sets a margin on the bottom of an element 4) margin-left - sets a margin on the left of an element 5) margin-right - sets a margin on the right of an element In this example, there is a ten pixel margin to the right of the first block that separates it from the second block: 'The Padding Style Family' – padding, padding-top, padding-bottom, padding-left, and padding-right Padding is a lot like margins in the sense that it puts space around an element, but padding includes the element's background color. There are five common types of padding: 1) padding - applies padding to all sides of an element 2) padding-top - applies padding to the top of an element 3) padding-bottom - applies padding to the bottom of an element 4) padding-left - applies padding to the left of an element 5) padding-right - applies padding to the right of an element Padding is commonly used to make elements look larger than their content. In this example, there is a box without padding, and a box with padding: I don't have padding I have 10px padding 'The Outline Style' – outline Outlines are styled lines drawn around the very outermost edge of an element. They ignore margins and go directly around their element. Their syntax follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed outline style might look like this: outline:#FFFFFF solid 5px For example, the following code: creates this: 'The Border Style' – border Borders are styled lines drawn around the very innermost edge of an element. They are contained within margins. Their syntax follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed border style might look like this: border:#FFFFFF solid 5px For example, the following code: creates this: 'The Cursor Style' – cursor Using CSS, you can change what cursor is displayed when the user's mouse is over a certain element. Listing of common cursors: auto default none help pointer progress wait crosshair text move not-allowed n-resize e-resize cell alias jQuery JQuery is a JavaScript library for modern web browsers. MediaWiki uses jQuery instead of vanilla JavaScript (JS) for Java web functions. Standard JavaScript can, however, be implemented into wiki pages through the use of the (now defunct) element. Typically, direct JS is used for small Java functions in web pages, which is ideal for wikia pages. Unfortunately, several important JS functions are disabled by Wikia, making it unusable in certain situations. For example, the onClick listener and HTML anchor elements that lead to JS are nullified. Those functions in jQuery are not blocked, however, so for situations where clicking on non-wiki links is required, one would use jQuery. This wikia primarily uses jQuery code for onClick events and for modifying CSS display styles to show/hide page elements. This can be seen in the popup windows on the mech pages. All of the existing custom jQuery code is located in our wiki's Common.js file, which can only be edited by admins. Verbatim tags are also admin-only tools, so any requests to insert jQuery or JS code into a wiki page must be sent to an active admin. 'The Click Listener Function' – $('A').click(function (B) {C}); "Event listeners" are parts of scripts that wait, or "listen", for something to happen. A click listener waits for the user to click the element that has the listener attached to it. This is used on the mech pages for popup windows - when the user clicks one of the buttons that opens a popup, the code within the click listener is executed. The structure of a click listener can be seen within this section's heading, with A representing the HTML element to receive the listener, B representing any arguments that are passed from the page to the script (this is usually blank), and C representing the code that executes when the click occurs. For example, this is what a segment of the mech pages' popup code looks like: $('#show').click(function () { var $popup = $('#popup'), display = $popup.css('display'); $popup.css('display', 'block'); var $fade = $('#fade'), display = $fade.css('display'); $fade.css('display', 'block'); }); In jQuery, targeting elements by id uses the # prefix, and targeting elements by class uses the . prefix. In the example above, there is an element on the page with the attribute id="show", which we target with the query #show. Other Code Any page code reference that is not HTML, CSS, or jQuery should be placed here. 'Wikicode: Verbatims' - Verbatims are code that are forcefully injected into wiki pages where they would be otherwise nullified. This is important for adding JavaScript and CSS stylesheets. If a JS function was needed on a wikia page, a verbatim would be created at a MediaWiki:NAME special page. The code within the newly-created page would then be applied to the receiving page by placing a verbatim element at the very top of the receiving page, like this: NewFunction. Verbatims can also be used to add CSS styles globally to pages. This is useful for when a certain style appears frequently within the page. Only admins can make verbatims, however, but any user can add an existing verbatim tag to a wikia page. Author's Note In case something important is missing from this reference page, feel free to add it yourself! If you're unable to do so for any reason, send me a message and I'll add myself. Just remember, it has to be something that is used on the wiki. We don't need a section explaining HTML metadata or standard JS syntax since none of that is relevant to normal wikia usage. If you need help with editing a page, just send me a message and I'll get back to you as soon as I can. --TiberiumFusion (talk) 20:32, June 14, 2014 (UTC)TiberiumFusion Category:Site administration tag acts as a container, like a div. The tag defines a new table row, and the tag defines a table cell. All table family tags must have a start and end tag, and be nested properly. For example, a properly nested table would look like this: Content More content Tables are used for sharp formatting on the mech pages and popup windows. Tables are often formatted with CSS to modify cell spacing, margins, cell colors, and more. More info on table styling in the CSS section. Tables may also make use of a element, which defines a table header. For the sake of simplicity on this wiki, we can use a regular element for a table header row. 'Other Common HTML Tags' Many other tags like